<template>
<div  class="search-container">
    <!-- 搜索栏 -->
    <!--
      Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
     -->
     <!-- 包裹form显示搜索 -->
    <form action="/">
      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        background="#3296fa"
        @search="onSearch"
        @cancel="onCancel"
        @clear="isResultShow=false"
      />
    </form>
    <!-- /搜索栏 -->

    <!-- 搜索结果 -->
    <search-result :search-text="searchText" v-if="isResultShow" />
    <!-- /搜索结果 -->

    <!-- 联想建议 -->
    <!-- <search-suggestion @updateSearchText='onUpdateSearchText' :search-text="searchText" v-else-if="searchText" /> -->
    <search-suggestion @updateSearchText='onSearch' :search-text="searchText" v-else-if="searchText" />

    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <search-history @updateSearchText='onSearch' :history-list="historyList" v-else />
    <!-- /搜索历史记录 -->
 </div>
 
</template>

<script>
import SearchResult from './components/search-result'
import SearchHistory from './components/search-history'
import SearchSuggestion from './components/search-suggestion'
import { getItem,setItem } from '@/utils/storage'
export default {
  name:'Search',
  components: {
    SearchResult,
    SearchHistory,
    SearchSuggestion
  },
  props: {},
  data () {
    // 获取历史记录本地存储读取
    const historyList = getItem('TOUTIAO_HISTORY_LIST') || []
    return {
        searchText:'',   // 输入框绑定的数据
        isResultShow:false,  // 搜索结果是否展示
        historyList // 历史记录
    }
  },
  computed: {},
  watch: {
    // 监听变化存储
    historyList: {
      handler(){
        setItem('TOUTIAO_HISTORY_LIST',this.historyList)
      },
      deep:true
    }
  },
  created () {},
  mounted () {},
  methods: {
    //   确定事件  【键盘按下了回车键或者手机键盘按下了搜索键/完成键】
    onSearch(val){
        console.log("确定了");
        // 显示搜索结果
        this.isResultShow = true
        // 设置给输入框
      this.searchText = val
      // 保存历史记录
      // 不重复就添加重复置顶
      if (!this.historyList.includes(val)){
        
        this.historyList.unshift(this.searchText)
      }else{
        const index = this.historyList.findIndex(item=>item===val)
        this.historyList.splice(index,1)
        this.historyList.unshift(this.searchText)
      }
      
    },
    //   取消事件   【点击了取消按钮或者关闭图标】
    onCancel(){
      this.$router.back();
    }
    // ,
    // 搜索建议触发点击事件
    // onUpdateSearchText(val){
    //   // 设置给输入框
    //   this.searchText = val
    //   // 搜索结果展示
    //   this.isResultShow = true
    // }
  }
}
</script>

<style scoped lang="less">
.search-container{
  /deep/ .van-search__action{
    color: #fff;
  }
}

</style>